<template>
  <div>
    <el-card class="box-card" style="margin: 20px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="班级编码">
          <el-input v-model="formInline.class_code" placeholder="班级编码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin: 20px;">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <!-- <el-table-column
          prop="courseId"
          label="课程ID"
          v-show="false"
          width="180"
        /> -->
        <el-table-column
          prop="displayOrder"
          label="讲次编号"
          width="100"
        />
        <el-table-column
          prop="name"
          label="讲次名称"
        />
        <!-- <el-table-column
          prop="roomId"
          label="直播间ID"
        /> -->
        <!-- <el-table-column
          label="上课形式"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.version && scope.row.version.startsWith("3.") ? 'web' : '客户端' }}
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button v-show="false" type="text" size="small">预览</el-button>
            <el-button type="text" size="small" @click="handleClick(scope.row.roomId)">复制回放地址</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Dashboard',
  data() {
    return {
      formInline: {
        class_code: ''
      },
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleClick(value) {
      navigator.clipboard.writeText('https://t.aixuexi.com/t/vmqUFnaa')
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex % 2) !== 0) {
        return 'warning-row'
      } else {
        return ''
      }
    },
    async getData() {
      if (this.formInline.class_code !== '') {
        const data = await axios.get(`https://teachapi.aixuexi.com/live/test/bx/course/detail/${this.formInline.class_code}`)
        this.tableData = data.data.data
      }
    }
  }
}
</script>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
